<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>
		
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

	    <link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-export.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/tableExport.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/FileSaver/FileSaver.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/jsPDF/jspdf.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/jsPDF-AutoTable/jspdf.plugin.autotable.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/tableExport/js-xlsx/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
		

		<link rel="stylesheet" type="text/css" href="/static/manage/common/layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/css/bootstrap.css" media="all">
		<link rel="stylesheet" type="text/css" href="/static/manage/common/global.css" media="all">
		<link rel="stylesheet" type="text/css" href="/static/manage/css/personal.css" media="all">
		
	</head>

	<body>
		<form class="form-inline">
			
			<div class="form-group">
				<label for="exampleInputId1">订单编号：</label>				
				<input type="text" style="width: 187px;" class="form-control" id="order_id" name="order_id" placeholder="请输入编号">
			</div>
			
			<div class="form-group">
			    <label for="exampleInputName1">顾客账号：</label>			   
				<input type="text" class="form-control" id="custom_user_id" name="custom_user_id" placeholder="请输入账号">
			</div>
			
            
			<div class="form-group ">
				<label for="exampleInputName1">顾客姓名：</label>
				<input type="text" class="form-control" id="username" name="username" placeholder="请输入顾客姓名">
			</div>
			
			
			<div class="form-group ">
				<label for="exampleInputName2">分类：</label>
                <select class="form-control"  style = "width:187px;" id="record_type" name="record_type">
					<option value="0">-- --</option>
					<option value="1">购买美颜币</option>
					<option value="2">购买套餐</option>
					<option value="3">使用消费</option>
					<option value="4">预约</option>
				<select>
			</div>
			
				 
			
				<div class="form-group">
				<label for="exampleInputName2">支付方式：</label>
                <select class="form-control"  style = "width:187px;word-break:break-all; word-wrap:break-all;" id="pay_way" name="pay_way">
					<option value="0">-- --</option>
					<option value="1">微信</option>
					<option value="2">支付宝</option>
					<option value="3">美颜币</option>
					<option value="4">礼包项目</option>
				<select>
			    </div>
		

			
			<div class="form-group">
				<label for="exampleInputName1">完成日期：</label>
				<input type="date" class="form-control" id="pay_timestart" name="pay_timestart" placeholder="">
				<label for="exampleInputName1">至</label>
			<input type="date" class="form-control" id="pay_timeend" name="pay_timeend" placeholder="">

			</div>
			 
					
				
					
			    <button type="button" class="btn btn-primary "id="btns2" >查询</button>
                 <button type="reset" class="btn btn-info" id="resetBtn">重置</button>
					
			</form>
		  
		<div>
		<table id="table">
         
	</table>
		</div>
		
		<script type="text/javascript">
			$(function() {

			

				//1.初始化Table

				var oTable = new TableInit();

				oTable.Init();

				var message = document.getElementById("message").value;

				if(message != null && message != "") {

					alert(message);

				}

			});

			var TableInit = function() {
				var oTableInit = new Object();
				//初始化Table
				oTableInit.Init = function() {

					$('#table').bootstrapTable({

						method: 'get',

						contentType: "application/x-www-form-urlencoded",

						url: "/bcr/list", //请求后台的URL（*）

						striped: true, //是否显示行间隔色

						locale: 'zh-CN', //中文支持

						pagination: true, //是否开启分页（*）

						pageNumber: 1, //初始化加载第一页，默认第一页

						pageSize: 1, //每页的记录行数（*）

						pageList: [1, 3, 5], //可供选择的每页的行数（*）

						sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

						showRefresh: true, //刷新按钮

						queryParams: oTableInit.queryParams, //传递参数（*）

						strictSearch: true,

						showColumns: true, //是否显示所有的列

						showRefresh: true, //是否显示刷新按钮

						minimumCountColumns: 2, //最少允许的列数

						clickToSelect: true, //是否启用点击选中
							
						showExport: true,                    
        				exportDataType: 'all',
        				exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
						
						uniqueId: "record_id", //每一行的唯一标识，一般为主键列

						columns: [{
							field: 'record_id',
							title: '流水号',
							align: 'center',
						}, {
							field: 'order_id',
							title: '订单编号',
							align: 'center',
						}, {
							field: 'custom_user_id',
							title: '顾客编号',
							align: 'center',
						}, {
							field: 'username',
							title: '顾客姓名',
							align: 'center',
						}, {
							field: 'beauty_num',
							title: '颜值数量',
							align: 'center',
						}, {
							field: 'pay_way',
							title: '支付方式',
							align: 'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "微信";
										break;
									case 2:
										return "支付宝";
										break;
									case 3:
										return "美颜币";
										break;
									case 4:
										return "礼包项目";
										break;
								}
							}
						}, {
							field: 'money',
							title: '实际支付金额(元)',
							align: 'center',
						}, {
							field:"record_type",
							title:"分类",
							align:'center',
							formatter: function(value, row, index) {
								switch(Number(value)) {
									case 1:
										return "购买美颜币";
										break;
									case 2:
										return "购买套餐";
										break;
									case 3:
										return "使用消费";
										break;
									case 4:
										return "预约";
										break;
								}
							}
						}, {
							field:'pay_time',
							title:'支付时间',
							align:'center',
					        sortable: true,
                //——修改——获取日期列的值进行转换
                            formatter: function (value, row, index) {
                            return changeDateFormat(value)
                			}

						}]

					});

				};
				  //修改——转换日期格式(时间戳转换为datetime格式)
      function changeDateFormat(cellval) {
    var dateVal = cellval + "";
    if (cellval != null) {
        var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
    }
}

				//得到查询的参数

			
				oTableInit.queryParams = function(params) {
				     
					var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

						offset: params.offset, //页面大小

						pageSize: params.limit, //偏移量
						
						

						order_id: $("#order_id").val(),
						
						custom_user_id:$("#custom_user_id").val(),
						
						username:$("#username").val(),
						
						record_type:$("#record_type").val(),
						
						pay_timestart:$("#pay_timestart").val(),
						
						pay_timeend:$("#pay_timeend").val(),
						
						pay_way:$("#pay_way").val()
						
						
					};
					return temp;
				};
				return oTableInit;
			};
			
			 //查询
			$('#btns2').click(function() {
				$('#table').bootstrapTable('refresh');
			})
		</script>
		   
		
		   
			
	</body>

</html>